"use client";
import React, { useRef, useEffect } from "react";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

const PointCloudDemo: React.FC = () => {
    const mountRef = useRef<HTMLDivElement | null>(null);

    useEffect(() => {
        if (!mountRef.current) return;

        // === 基础场景 ===
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x000000);

        const camera = new THREE.PerspectiveCamera(
            75,
            mountRef.current.clientWidth / mountRef.current.clientHeight,
            0.1,
            1000
        );
        camera.position.set(0, 0, 5);

        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(
            mountRef.current.clientWidth,
            mountRef.current.clientHeight
        );
        mountRef.current.appendChild(renderer.domElement);

        // === 控制器 ===
        const controls = new OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;

        // === 点云数据 ===
        const numPoints = 5000;
        const positions = new Float32Array(numPoints * 3);
        const colors = new Float32Array(numPoints * 3);
        const color = new THREE.Color();

        for (let i = 0; i < numPoints; i++) {
            const x = (Math.random() - 0.5) * 10;
            const y = (Math.random() - 0.5) * 10;
            const z = (Math.random() - 0.5) * 10;
            positions.set([x, y, z], i * 3);

            color.setHSL((x + 5) / 10, 1.0, 0.5);
            colors.set([color.r, color.g, color.b], i * 3);
        }

        const geometry = new THREE.BufferGeometry();
        geometry.setAttribute(
            "position",
            new THREE.BufferAttribute(positions, 3)
        );
        geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));

        const material = new THREE.PointsMaterial({
            size: 0.05,
            vertexColors: true,
            transparent: true,
            opacity: 0.9,
        });

        const points = new THREE.Points(geometry, material);
        scene.add(points);

        // === 动画循环 ===
        const animate = () => {
            requestAnimationFrame(animate);
            points.rotation.y += 0.001;
            controls.update();
            renderer.render(scene, camera);
        };
        animate();

        // === 监听窗口大小 ===
        const handleResize = () => {
            if (!mountRef.current) return;
            camera.aspect =
                mountRef.current.clientWidth / mountRef.current.clientHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(
                mountRef.current.clientWidth,
                mountRef.current.clientHeight
            );
        };
        window.addEventListener("resize", handleResize);

        // === 清理函数 ===
        return () => {
            window.removeEventListener("resize", handleResize);
            mountRef.current?.removeChild(renderer.domElement);
            geometry.dispose();
            material.dispose();
        };
    }, []);

    return <div ref={mountRef} style={{ width: "100%", height: "100vh" }} />;
};

export default PointCloudDemo;
